{% extends 'myhome/base.html' %}

    {% block title %}
    <title>BookShop</title>
    {% endblock %}

    {% block con %}
    <!-- slider-group-start -->
    <div class="slider-group  mt-30">
        <div class="container">
            <div class="row">
                <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
                    <!-- slider-area-start -->
                    <div class="slider-area">
                        <div class="slider-active owl-carousel">
                            <div class="single-slider slider-hm4-1 pt-154 pb-154 bg-img" style="background-image:url(/static/myhome/img/slider/7.jpg);">
                                <div class="slider-content-4 slider-animated-1 pl-40">
                                    <h1>Sale up to 30% off</h1>
                                    <h2>Books in Store</h2>
                                    <a href="#">Shopping now!</a>
                                </div>
                            </div>
                            <div class="single-slider pt-154 pb-154 bg-img" style="background-image:url(/static/myhome/img/slider/8.jpg);">
                                <div class="slider-content-4 slider-animated-1 pl-40">
                                    <h1>Sale up to 30% off</h1>
                                    <h2>Books in Order</h2>
                                    <a href="#">Shopping now!</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- slider-area-end -->
                </div>
                <div class="col-lg-3 col-md-3 hidden-sm col-xs-12">
                    <!-- banner-static-2-start -->
                    <div class="banner-static-2">
                        <div class="banner-img-2">
                            <a href="#"><img src="/static/myhome/img/banner/20.jpg" alt="banner" /></a>
                        </div>
                        <!-- banner-area-3-start -->
                        <div class="banner-area-3">
                            <!-- single-banner-2-start -->
                            <div class="single-banner-2 mt-16">
                                <div class="single-icon-2">
                                    <a href="#">
                                        <img class="service-blue-img" src="/static/myhome/img/icon-img/service-3.png" alt="banner" />
                                        <img class="service-white-img" src="/static/myhome/img/icon-img/service-3-white.png" alt="banner" />
                                    </a>
                                </div>
                                <div class="single-text-2">
                                    <h2>正规渠道，正品保障</h2>
                                    <p>我们保证所售商品均为正品</p>
                                </div>
                            </div>
                            <!-- single-banner-2-end -->
                            <!-- single-banner-2-start -->
                            <div class="single-banner-2 mt-16">
                                <div class="single-icon-2">
                                    <a href="#">
                                        <img class="service-blue-img" src="/static/myhome/img/icon-img/service-1.png" alt="banner" />
                                        <img class="service-white-img" src="/static/myhome/img/icon-img/service-1-white.png" alt="banner" />
                                    </a>
                                </div>
                                <div class="single-text-2">
                                    <h2>625 城市，次日到达</h2>
                                    <p>23:00前提交的订单次日送达</p>
                                </div>
                            </div>
                            <!-- single-banner-2-end -->
                            <!-- single-banner-2-start -->
                            <div class="single-banner-2 mt-16">
                                <div class="single-icon-2">
                                    <a href="#">
                                        <img class="service-blue-img" src="/static/myhome/img/icon-img/service-2.png" alt="banner" />
                                        <img class="service-white-img" src="/static/myhome/img/icon-img/service-2-white.png" alt="banner" />
                                    </a>
                                </div>
                                <div class="single-text-2">
                                    <h2>退换无忧，购物无忧</h2>
                                    <p>自签收 7 日内可以申请退货</p>
                                </div>
                            </div>
                            <!-- single-banner-2-end -->
                        </div>
                        <!-- banner-area-3-end -->
                    </div>
                    <!-- banner-static-2-end -->
                </div>
            </div>
        </div>
    </div>
    <!-- slider-group-end -->

    <!-- home-main-area-start -->
    <div class="home-main-area mt-30">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                    <!-- category-area-start -->
                    <div class="category-area mb-30">
                        <h3><a href="#">图书分类<i class="fa fa-bars"></i></a></h3>
                        <div class="category-menu">
                            <nav class="menu">
                                <ul>
                                {% for i in classify %}
                                    <li class="cr-dropdown">
                                        <a href="{% url 'myhome_category' i.id %}">{{ i.name }}
                                            <i class="none-lg fa fa-angle-down"></i>
                                            <i class="none-sm fa fa-angle-right"></i>
                                        </a>
                                        <div class="left-menu">
                                        {% for ii in i.sub %}
                                            <span>
                                                <a href="{% url 'myhome_category' ii.id %}" class="title">{{ ii.name }}</a>
                                                {% for iii in ii.books_set.all %}
                                                    <a href="{% url 'myhome_bookdetails' iii.id %}">{{ iii.title }}</a>
                                                {% endfor %}
                                            </span>
                                        {% endfor %}
                                        </div>
                                    </li>
                                {% endfor %}
                                </ul>
                            </nav>
                        </div>
                    </div>
                    <!-- category-area-end -->

                    <!-- banner-area-start -->
                    <!-- banner-area-end -->

                    <!-- most-product-area-start -->
                    <div class="most-product-area mb-30">
                        <div class="section-title-2 mb-30">
                            <h3>畅销榜</h3>
                        </div>
                        <div class="product-active-2 owl-carousel">
                            <div class="product-total-2">
                            {% for i in w_f.books_set.all %}
                                <div class="single-most-product bd mb-18">
                                    <div class="most-product-img">
                                        <a href="{% url 'myhome_bookdetails' i.id %}">
                                            <img src="{{ i.bookimgs_set.first.img_url }}" alt="book" />
                                        </a>
                                    </div>
                                    <div class="most-product-content">
                                        <h4><a href="{% url 'myhome_bookdetails' i.id %}">{{ i.title }}</a></h4>
                                        <div class="product-price">
                                            <ul>
                                                <li>￥{{ i.price }}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                            </div>
                        </div>
                    </div>
                    <!-- most-product-area-end -->

                    <!-- block-newsletter-area-start -->
                    <div class="block-newsletter">
                        <h2>成为会员</h2>
                        <p>您可以随时了解所有促销活动和我们的动态</p>
                        <a href="{% url 'myhome_register' %}">注册</a>
                    </div>
                    <!-- block-newsletter-area-end -->

                    <br>
                    <!-- recent-post-area-start -->
                    <div class="recent-post-area mb-30">
                        <div class="section-title-2 mb-30">
                            <h3>读书社区</h3>
                        </div>
                        <div class="post-active-2 owl-carousel">
                            <div class="single-post">
                                <div class="post-img">
                                    <a href="#"><img src="/static/myhome/img/post/2.jpg" alt="post" /></a>
                                    <div class="blog-date-time">
                                        <span class="day-time">01</span>
                                        <span class="moth-time">Nov</span>
                                    </div>
                                </div>
                                <div class="post-content">
                                    <h3><a href="#">The future is built on a strong foundation of the past</a></h3>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- recent-post-area-end -->

                </div>

                <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
                    <!-- banner-area-5-start -->
                    <!-- banner-area-5-end -->

                    <!-- 商品展示 -->
                    <!-- hot-sell-area-2-start -->
                    <div class="hot-sell-area-2 pb-50">
                        <div class="section-title-2 title-big bt pt-50 mb-30">
                            <h3>新书上架</h3>
                        </div>
                        <div class="hot-sell-active owl-carousel owl-loaded owl-drag">
                            <div class="owl-stage-outer">
                                <div class="owl-stage" style="transform: translate3d(-1446px, 0px, 0px); transition: all 1s ease 0s; width: 2894px;">
                                {% for i in googsdata %}
                                    <div class="owl-item" style="width: 269.333px; margin-right: 20px;">
                                        <div class="product-wrapper">
                                            <div class="product-img">
                                                <a href="{% url 'myhome_bookdetails' i.id %}">
                                                    <img src="{{ i.bookimgs_set.first.img_url }}" class="primary"></a>
                                                <div class="product-flag">
                                                    <ul>
                                                        <li><span class="sale">new</span></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="product-details text-center">
                                                <div class="product-rating mt-20">
                                                    <ul>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    </ul>
                                                </div>
                                                <h4>
                                                    <a href="{% url 'myhome_bookdetails' i.id %}">{{ i.title }}</a></h4>
                                                <div class="product-price">
                                                    <ul>
                                                        <li>￥{{ i.price }}元</li></ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                                </div>
                            </div>
                            <div class="owl-nav">
                                <button type="button" role="presentation" class="owl-prev">
                                    <i class="fa fa-angle-left"></i>
                                </button>
                                <button type="button" role="presentation" class="owl-next">
                                    <i class="fa fa-angle-right"></i>
                                </button>
                            </div>
                            <div class="owl-dots disabled"></div>
                        </div>
                    </div>
                    <!-- hot-sell-area-2-end -->

                    <!-- new-book-area-start -->
                    {% for i in classify %}
                    <div class="hot-sell-area-2 pb-50">
                        <div class="section-title-2 title-big bt pt-50 mb-30">
                            <h3>{{ i.name }}</h3>
                        </div>
                        <div class="hot-sell-active owl-carousel owl-loaded owl-drag">
                            <div class="owl-stage-outer">
                                <div class="owl-stage" style="transform: translate3d(-1446px, 0px, 0px); transition: all 1s ease 0s; width: 2894px;">
                                {% for ii in i.sub %}
                                    {% for iii in ii.books_set.all %}
                                    <div class="owl-item" style="width: 269.333px; margin-right: 20px;">
                                        <div class="product-wrapper">
                                            <div class="product-img">
                                                <a href="{% url 'myhome_bookdetails' iii.id %}">
                                                    <img src="{{ iii.bookimgs_set.first.img_url }}" style="width:250px;" class="primary"></a>
                                            </div>
                                            <div class="product-details text-center">
                                                <div class="product-rating mt-20">
                                                    <ul>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    </ul>
                                                </div>
                                                <h4>
                                                    <a href="{% url 'myhome_bookdetails' iii.id %}">{{ iii.title }}</a></h4>
                                                <div class="product-price">
                                                    <ul>
                                                        <li>￥{{ iii.price }}元</li></ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                {% endfor %}
                                </div>
                            </div>
                            <div class="owl-nav">
                                <button type="button" role="presentation" class="owl-prev">
                                    <i class="fa fa-angle-left"></i>
                                </button>
                                <button type="button" role="presentation" class="owl-next">
                                    <i class="fa fa-angle-right"></i>
                                </button>
                            </div>
                            <div class="owl-dots disabled"></div>
                        </div>
                    </div>
                    {% endfor %}
                    <!-- new-book-area-end -->



                </div>
            </div>
        </div>
    </div>
    <!-- home-main-area-end -->

    <!-- banner-area-start -->
    <div class="banner-area-5 mtb-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="banner-img-2 for-height">
                        <a href="#"><img src="/static/myhome/img/banner/5.jpg" alt="banner" /></a>
                        <div class="banner-text">
                            <h3>G. Meyer Books & Spiritual Traveler Press</h3>
                            <h2>Sale up to 30% off</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- banner-area-end -->

    <!-- social-group-area-start -->

    <!-- social-group-area-end -->
    {% endblock %}